<template>
	<!-- 搜索框区域 -->
	<view class="search-area flex-c-c">
		<!-- 搜索框图标 -->
		<image class="search-icon" src="/static/image/categorySearch.png"></image>
		<!-- 搜索输入框 -->
		<input class="search-input" type="text" placeholder="搜索商品名称" placeholder-style=""/>
	</view>
	<!-- 分类页面 -->
	<view class="category-page">
		<!-- 分类设置 -->
		<view class="category">
			<!-- 分类区域 -->
			<view class="category-area">
				<!-- 分类项 -->
				<view class="category-item flex-c-c" v-for="(categoryItem,index) in categoryData"  @click="handleCategoryClick(categoryItem.id, index)" :key="categoryItem.id" :style="{ backgroundColor: activeCategoryId === categoryItem.id ? '#fff' : '#ededed' }">
					<!-- 每个分类项名称 -->
					<view class="category-name">{{ categoryItem.title }}</view>
				</view>
			</view>
			<!-- 商品区域 -->
			<view class="goods-area" v-if="activeCategoryId">
				<!-- 商品顶部图片 -->
				<image class="goods-top-img" :src="categoryData.find(c => c.id === activeCategoryId)?.img_url"></image>
				<!-- 商品列表 -->
				<view class="goods-list">
					<!-- 商品项 -->
					<view class="goods-item" v-for="item in goodsListByCategory[activeCategoryId] || []" :key="item.id">
						<!-- 商品项图片 -->
						<image class="goods-item-img" :src="item.thumb_path"></image>
						<!-- 商品项文本区域 -->
						<view class="goods-item-text-area">
							<!-- 商品项标题 -->
							<view class="goods-item-title">{{ item.title }}</view>
							<!-- 商品项价格区域 -->
							<view class="goods-item-price-area">
								<!-- 商品项价格 -->
								<view class="goods-item-Price">￥{{ item.sell_price }}</view>
								<!-- 价格后缀00 -->
								<span class="zero">.00</span>
								<!-- 商品项原价 -->
								<span class="originalPrice">￥{{ item.market_price }}</span>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from "vue"
import http from '../../api/request'
import { onLoad } from '@dcloudio/uni-app'

const loading = ref(false)
const categoryData = ref([])
// 修改为对象结构存储不同分类的商品数据
const goodsListByCategory = ref({})
// 当前激活的分类ID
const activeCategoryId = ref(null)
const loadingGoods = ref(false)

// 获取分类数据
const getCategoryData = async () => {
    loading.value = true
    const res = await http.get('/api/getcategory')
    console.log('分类数据:', res)
    
    categoryData.value = res || []
    
    if (res.length > 0) {
      activeCategoryId.value = res[0].id
      await getCategoryGoods(res[0].id)
    }
    loading.value = false
}

// 获取指定分类的商品
const getCategoryGoods = async (id) => {
  if (!id) return
    loadingGoods.value = true
    const res = await http.get(`/api/getcategorygoods?category_id=${id}`)
    console.log(`分类 ${id} 商品数据:`, res)
    
    // 根据API响应结构调整  TODO
    goodsListByCategory.value = {
      ...goodsListByCategory.value,
      [id]: res.goods || res || [] // 适配不同响应结构
    }
    loadingGoods.value = false
}

// 点击分类项处理
const handleCategoryClick = (id, index) => {
  activeCategoryId.value = id
  if (!goodsListByCategory.value[id]) {
    getCategoryGoods(id)
  }
}

onLoad(() => {
  getCategoryData()
})

</script>

<style lang="scss">
	// 搜索框区域
	.search-area {
		z-index: 999;
		position:fixed;
		background-color: white;
		width: px2rpx(375);
		height: px2rpx(24);
		padding: px2rpx(10) px2rpx(12);
		// 搜索框图标
		.search-icon {
			background-color: #d6d6d6;
			width: px2rpx(24);
			height: px2rpx(34);
		}
		// 搜索输入框
		.search-input {
			background-color: #d6d6d6;
			margin-right: px2rpx(35);
			width: px2rpx(339);
			height: px2rpx(34);
		}
	}
	// 页面设置
	.category-page {
		// 分类列表区域
		.category {
			width: px2rpx(295);
			height: px2rpx(775);
			display: flex;
			flex-direction: row;
			// 分类区域
			.category-area {
				margin-top: px2rpx(44);
				background-color: #ededed;
				width: px2rpx(80);
				height: px2rpx(320);
				// 分类项
				.category-item {
					background-color: #ededed;
					width: px2rpx(80);
					height: px2rpx(60);
					// 每个分类项名称
					.category-name {
						width: px2rpx(56);
						height: px2rpx(20);
						font-size: px2rpx(14);
					}
				}
			}
			// 商品区域
			.goods-area {
				width: px2rpx(294);
				height: px2rpx(784);
				// 商品顶部图片
				.goods-top-img {
					margin-top: px2rpx(42);
					width: px2rpx(294);
					height: px2rpx(76);
				}
				// 商品列表
				.goods-list {
					// 商品项
					.goods-item {
						display: flex;
						flex-direction: row;
						// 商品项图片
						.goods-item-img {
							width: px2rpx(88);
							height: px2rpx(88);
						}
						// 商品项文本区域
						.goods-item-text-area {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							width: px2rpx(167);
							height: px2rpx(88);
							// 商品项标题
							.goods-item-title {
								color: black;
								font-size: px2rpx(12);
							}
							// 商品项价格区域
							.goods-item-price-area {
								display: flex;
								flex-direction: row;
								align-items: baseline;
								width: px2rpx(167);
								height: px2rpx(22);
								// 商品项价格
								.goods-item-Price {
									color: #ff6000;
									font-size: px2rpx(16);
								}
								// 价格后缀00
								.zero {
									color: #ff6000;
									font-size: px2rpx(12);
								}
								// 商品原价
								.originalPrice {
									color: #969799;
									font-size: px2rpx(10);
									text-decoration: line-through;
								}
							}
						}
					}
				}
			}
		}
	}
</style>